<template>
  <div class="my_photo">
    <template v-if="fileList.length>0">
      <radio-group @change="selectItem">
        <div class="photo_box" v-for="(item,index) in fileList" :key="index">
          <image class="photo" :src="item.url" mode="aspectFill"></image>
          <div class="cover_bg"></div>
          <div class="content">{{ passVerify ? '照片审核中' : '照片未通过审核' }}</div>
          <radio v-if="!showManage" class="photo_radio" color="#1c6ad7" :value="index" :checked="item.checked"/>
        </div>
      </radio-group>
    </template> 
    <van-empty
      v-else
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="相册为空"
    />
    <div class="photo_set">
      <div class="photo_set_item" :style="{width:(100/bottomSet.length)+'%'}" v-for="(item,index) in bottomSet" :key="index" @click="photoSet(item.id)">{{ item.name }}</div>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        showManage:true,
        passVerify:false,
        fileList:[],
        setPhoto:[
          {id:0,name:'管理'},
          {id:1,name:'上传'},
        ],
        makePhoto:[
          {id:1,name:'上传'},
          {id:2,name:'设置头像'},
          {id:3,name:'删除'},
          {id:4,name:'取消'},
        ],
        currentKey:0,

      }
    },
    computed:{
      bottomSet(){
        return !this.showManage ? this.makePhoto : this.setPhoto
      }
    },
    methods:{
      photoSet(val){
        this.currentKey = val
        const _this = this;
        switch(val){
          case 0:
            if(this.fileList.length==0) return;
            this.showManage = false
            break;
          case 1:
            uni.chooseImage({
              count:9,
              success(res){
                console.log(res.tempFilePaths,'===')
                res.tempFilePaths.forEach(item=> _this.fileList.push({url:item,checked:false}))
               
              }
            })
            break;
          case 2:
            if(!this.passVerify){
              uni.showModal({title:'照片未通过审核,请重新选择'})
            };
            break;
          case 3:
            this.fileList.splice(this.currentKey,1);
            uni.showToast({title:'照片删除成功',icon:'none'})
            break;
          case 4:
            this.showManage = true
            break;
        }
      },
      selectItem(e){
        this.currentKey = e.detail.value
      }
    },
  }
</script>
<style scoped lang="scss">
.my_photo{
  padding:30rpx;
  .custom-image{
    :deep(.van-empty){
      margin:100px auto;
      .van-empty__image{
        width: 100px;
        height: 100px;
      }
    }
  }
  .photo_box{
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
    &:nth-child(3n){
      margin-right: 0;
    }
    .photo{
      width: 100%;
      height: 100%;
    }
    .cover_bg{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba($color: #000000, $alpha: 0.7);
    }
    .content{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      font-size: 14px;
      color: #fff;
      justify-content: center;
      align-items: center;
    }
    .photo_radio{
      position: absolute;
      right: 5px;
      bottom: 5px;
      transform: scale(0.8);
    }
  }
  .photo_set{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    border-top: 1px solid #f7f7f7;
    background-color: #fff;
    display: flex;
    background-color: #fff;
    .photo_set_item{
      margin:10px 0;
      font-size: 16px;
      border-right: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      &:last-child{
        border-right: 0;
      }
    }

  }
}

</style>